<template>
  <el-dialog
    title="问题详情"
    :visible.sync="detailDialogVisible"
    width="750"
    @opened="handleOpen"
    :before-close="handleClose"
  >
    <el-row class="mb-3">
      <el-col :span="12">
        <span class="text-gray-400">问题编号:</span>
        <span>{{ detail.id }}</span>
      </el-col>
      <el-col :span="12">
        <span class="text-gray-400">排序:</span>
        <span>{{ detail.sort }}</span>
      </el-col>
    </el-row>
    <el-row class="mb-3">
      <el-col :span="12">
        <span class="text-gray-400">问题名称:</span>
        <span>{{ detail.name }}</span>
      </el-col>
      <el-col :span="12">
        <span class="text-gray-400">有助率:</span>
        <span>{{ detail.helpful_rate }}</span>
      </el-col>
    </el-row>
    <el-row class="mb-3">
      <el-col :span="12">
        <span class="text-gray-400">问题状态:</span>
        <span>{{ detail.status === 1 ? "启用" : "禁用" }}</span>
      </el-col>
      <el-col :span="12">
        <span class="text-gray-400">生效时间:</span>
        <span>{{
          detail.valid_date_type === 1
            ? "永久"
            : detail.valid_date_start + "-" + detail.valid_date_end
        }}</span>
      </el-col>
    </el-row>
    <el-row class="mb-3">
      <el-col>
        <span class="text-gray-400">备注:</span>
        <span>{{ detail.remark }}</span>
      </el-col>
    </el-row>
    <el-row class="mb-3">
      <el-col>
        <p class="text-gray-400 mb-2">问题答案:</p>
        <div class="answer" v-html="detail.answer"></div>
      </el-col>
    </el-row>
    <span slot="footer" class="dialog-footer" center>
      <el-button @click="handleClose">关 闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getDetailData } from "@/api/config/onlineQuestion";

export default {
  name: "detailModal",
  props: {
    detailDialogVisible: {
      type: Boolean,
      default: false
    },
    id: {
      type: Number
    }
  },
  data() {
    return {
      detail: {}
    };
  },
  methods: {
    handleOpen() {
      getDetailData(this.id).then(res => {
        this.detail = res.data;
      });
    },
    handleClose(done) {
      this.detail = {};
      this.$emit("update:detailDialogVisible", false);
    }
  }
};
</script>
<style lang="scss" scoped>
.answer {
  width: 100%;
  height: 300px;
  overflow: auto;
  border: 1px solid #989898;
  border-radius: 8px;
  padding: 5px;
}
</style>
